<template>
    <div id="study">
        <div class="container">
            <div class="chooses">
                <div class="choose">类型筛选<i class="el-icon-caret-bottom"></i></div>
                <div class="choose">语言筛选<i class="el-icon-caret-bottom"></i></div>
                <div class="choose">岗位筛选<i class="el-icon-caret-bottom"></i></div>
            </div>
        </div>

        <div class="container">
            <div class="studys">
                <div class="choosewhat">
                    <div style="width: 100%;text-align: center;font-size: 13px;color: #2D6EFF;">类型名称</div>
                    <div style="width: 100%;text-align: center;font-size: 13px;">类型名称</div>
                    <div style="width: 100%;text-align: center;font-size: 13px;">类型名称</div>
                </div>
                <div class="content" v-for="item of 8" @click="gostudyPage">
                    <!-- 角标 -->
                    <div class="contentSign">
                        精选
                    </div>

                    <div class="contentImg">
                        <el-image :src="require('@/assets/img/home/轮播1.png')" style="height: 100%;"></el-image>
                    </div>
                    <div class="contentTxt">
                        <div class="contentTxtTitle">十个Python实用小技巧</div>
                        <div class="contentTxtExplain">办公自动化，小爬虫，数据分析，Python</div>
                        <div class="contentTxtUp">
                            <!-- 浏览量 -->
                            <div class="watchNum">
                                <span><i class="el-icon-view"></i></span>
                                <span>100</span>
                            </div>
                            <!-- 收藏量 -->
                            <div class="collectNum">
                                <span><i class="el-icon-star-off"></i></span>
                                <span>100</span>
                            </div>
                            <!-- 点赞量 -->
                            <div class="planNum">
                                <span><i class="el-icon-document-checked"></i></span>
                                <span>100</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container" style="margin-bottom: 3rem;">
            <div style="width: 960px;">
                <div style="margin: 0 auto;width: 530px;">
                    <el-pagination background current-page.sync="5" :page-size="100" layout="prev, pager, next, jumper"
                        :total="1000">
                    </el-pagination>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {
            gostudyPage() {
                this.$router.push('/studyPage')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/css/study/study.scss'
</style>
